import Vector2 from "../../vector";
import PillState, { SmallPillState, BigPillState } from "../pillState";

const cellSize = 8;
const colorTable = [
  '',        /* placeholder */
  '#ff004d', /* red */
  '#fff025', /* yellow */
  '#29adff', /* blue */
];

export default class Pill<S extends PillState> {
  pillState: S;
  ctx: CanvasRenderingContext2D;

  draw() {}
}

export class SmallPill extends Pill<SmallPillState> {
  draw() {
    const pos = this.pillState.gridPos.mul(cellSize);
    this.ctx.fillStyle = colorTable[this.pillState.value];
    this.ctx.fillRect(pos.x, pos.y, cellSize, cellSize);
  }
}

export class BigPill extends Pill<BigPillState> {
  draw() {
    const { gridPos, isVertical, value } = this.pillState;
    const part1Pos = gridPos.mul(cellSize);
    const part2Pos = isVertical
      ? new Vector2(gridPos.x * cellSize, (gridPos.y + 1) * cellSize)
      : new Vector2((gridPos.x + 1) * cellSize, gridPos.y * cellSize);
    this.ctx.fillStyle = colorTable[value[0]];
    this.ctx.fillRect(part1Pos.x, part1Pos.y, cellSize, cellSize);
    this.ctx.fillStyle = colorTable[value[1]];
    this.ctx.fillRect(part2Pos.x, part2Pos.y, cellSize, cellSize);
  }
}